<template>
  <view class="w-full min-h-screen bg-gray-50">
    <!-- 搜索头部 -->
    <view class="w-full bg-white box-border px-[20rpx] py-[20rpx] border-b border-gray-200">
      <view class="flex items-center">
        <view class="flex-1 flex items-center relative bg-white pl-[24rpx] border border-solid border-gray-200 rounded-[40rpx] h-[64rpx] overflow-hidden shadow-sm">
          <input 
            type="text" 
            class="flex-1 bg-transparent px-[20rpx] pr-[48rpx]" 
            style="font-size: 28rpx;"
            v-model="keyword" 
            placeholder="请输入服务名称" 
            placeholder-class="text-gray-400"
            placeholder-style="font-size: 28rpx;"
            @confirm="searchService"
          />
          <view 
            class="absolute right-0 top-0 h-full w-[120rpx] z-10 flex items-center justify-center bg-#3d8944 transition-opacity"
            @tap="searchService"
          >
            <view class="i-local-search text-[40rpx] text-white"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="w-full px-[20rpx] py-[20rpx] box-border flex flex-col items-center">
      <!-- 搜索结果统计 -->
      <view v-if="searchResults.length > 0" class="mb-[20rpx] text-[24rpx] text-gray-500">
        找到 {{ total }} 个相关服务
      </view>

      <!-- 搜索结果列表 -->
      <view v-if="searchResults.length > 0" class="space-y-[20rpx] w-full">
        <good 
          v-for="item in searchResults" 
          :key="item.id" 
          :src="useImage(item.pic || item.image || '')" 
          :obj="item"
          @jump="goToDetail(item)"
        />
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="flex flex-col items-center justify-center py-[100rpx]">
        <view class="w-[40rpx] h-[40rpx] border-2 border-blue-500 border-t-transparent rounded-full animate-spin"/>
        <text class="text-[24rpx] text-gray-400 mt-[20rpx]">搜索中...</text>
      </view>

      <!-- 无搜索结果 -->
      <view v-else-if="hasSearched && !loading && searchResults.length === 0" class="flex flex-col items-center justify-center py-[100rpx]">
        <view class="i-local-search w-[80rpx] h-[80rpx] text-gray-300 mb-[20rpx]"/>
        <text class="text-[28rpx] text-gray-400">暂无相关服务</text>
        <text class="text-[24rpx] text-gray-300 mt-[10rpx]">请尝试其他关键词</text>
      </view>

      <!-- 初始状态 -->
      <view v-else-if="!hasSearched && !loading" class="flex flex-col items-center justify-center py-[100rpx]">
        <view class="i-local-search w-[80rpx] h-[80rpx] text-gray-300 mb-[20rpx]"/>
        <text class="text-[28rpx] text-gray-400">请输入关键词搜索服务</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { request } from '@/service/request'
import good from '@/pages/index/components/good.vue'
import { useImage } from '@/hooks'

// 响应式数据
const keyword = ref('')
const searchResults = ref<any[]>([])
const loading = ref(false)
const hasSearched = ref(false)
const total = ref(0)

// 页面参数
const routeParams = Taro.getCurrentInstance()?.router?.params

onMounted(() => {
  // 如果从其他页面传入了搜索关键词，自动搜索
  if (routeParams?.keyword) {
    // 接收到的原始参数
    // 关键词参数
    keyword.value = routeParams.keyword
    searchService()
  }
})

// 搜索服务
async function searchService() {
  if (!keyword.value.trim()) {
    Taro.showToast({
      title: '请输入搜索关键词',
      icon: 'none',
      duration: 2000
    })
    return
  }

  loading.value = true
  hasSearched.value = true

  try {
    // 发送搜索请求，关键词
    const response = await request.post<any>(
      `/nurse_goods/nurseGoods/queryList`,
        {
          hasChild: 0,
          hospital: JSON.parse(Taro.getStorageSync('defaultHospital') || '{}')?.code,
          typeName: keyword.value.trim()
        },
      {
        useErrMsg: true
      }
    )

    if (response.success) {
      searchResults.value = response.success.records || response.success.list || []
      total.value = response.success.total || searchResults.value.length
      
      if (searchResults.value.length === 0) {
        Taro.showToast({
          title: '暂无相关服务',
          icon: 'none',
          duration: 1500
        })
      }
    } else {
      searchResults.value = []
      total.value = 0
      Taro.showToast({
        title: '搜索失败',
        icon: 'none',
        duration: 2000
      })
    }
  } catch (error) {
    // 搜索服务出错
    searchResults.value = []
    total.value = 0
    Taro.showToast({
      title: '搜索出错',
      icon: 'none',
      duration: 2000
    })
  } finally {
    loading.value = false
  }
}

// 跳转到服务详情
function goToDetail(item: any) {
  Taro.navigateTo({
    url: `/package/goodsdetail/index?id=${item.id}&goods_type=1`
  })
}

// 返回上一页
function goBack() {
  Taro.navigateBack()
}
</script>

<style lang="scss">
/* 确保页面样式正常显示 */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.gos{
  width: 100%;
  height: 100%;
  max-width: 670rpx !important;
}
</style>
